<template>
	<view>

		<view :class="tab == 1 ? 'show' : 'hide'">
			<view class="form">
				<u--image :src="system.domain+'/assets/addons/kzvote/img/pk.png'" width="100%" height="150px">
				</u--image>
				<u-text text="活动名称" lineHeight="50" prefixIcon="star-fill"
					:iconStyle="{ color: color_value,'margin-right':'5px' }"></u-text>
				<u-input v-model="vote.name" placeholder="请输入活动名称" border="bottom"></u-input>

				<u-text text="蓝方" lineHeight="50" prefixIcon="rewind-right-fill"
					:iconStyle="{ color: color_value,'margin-right':'5px' }"></u-text>
				<u-input v-model="vote.blue" placeholder="请输入蓝方名称" border="bottom"></u-input>

				<u-text text="红方" lineHeight="50" prefixIcon="rewind-left-fill"
					:iconStyle="{ color: color_value,'margin-right':'5px' }"></u-text>
				<u-input v-model="vote.red" placeholder="请输入红方名称" border="bottom"></u-input>

				<view @click="datetime = true;datetime_field = 'start_time';">
					<u-text text="开始时间" lineHeight="50" prefixIcon="clock-fill"
						:iconStyle="{ color: color_value,'margin-right':'5px'}">
					</u-text>
					<u-input v-model="vote.start_time" disabled disabledColor="#ffffff" placeholder="请选择投票开始时间"
						border="bottom"></u-input>
				</view>
				<view @click="datetime = true;datetime_field = 'end_time';">
					<u-text text="结束时间" lineHeight="50" prefixIcon="clock-fill"
						:iconStyle="{ color: color_value,'margin-right':'5px'}">
					</u-text>
					<u-input v-model="vote.end_time" disabled disabledColor="#ffffff" placeholder="请选择投票结束时间"
						border="bottom"></u-input>
				</view>
				<u-text text="活动/奖品详情" lineHeight="50" prefixIcon="file-text-fill"
					:iconStyle="{ color: color_value,'margin-right':'5px'}"></u-text>
				<u-textarea v-model="vote.desc" placeholder="请输入内容" height="100"></u-textarea>
				<u-button text="下一步" shape="circle" :color="color_value" @click="tab = 2"
					:customStyle="{marginTop:'15px','box-shadow': '2px 2px 3px rgba(26, 26, 26, 0.2)'}"></u-button>
			</view>
		</view>
		<view :class="tab == 2 ? 'show' : 'hide'">
			<u-form :model="vote" labelPosition="left" labelWidth="150px">
				<view class="form">
					<u-form-item label="投票总次数" prop="limit_count" leftIcon="tags-fill"
						:leftIconStyle="{ color: color_value }" borderBottom="true">
						<u-input v-model="vote.limit_count" placeholder="0为不限制" border="none" type="number"
							inputAlign="right"></u-input>
					</u-form-item>
					<u-form-item label="每天投票次数" prop="day_limit_count" leftIcon="bookmark-fill"
						:leftIconStyle="{ color: color_value }" borderBottom="true">
						<u-input v-model="vote.day_limit_count" placeholder="1" border="none" type="number"
							inputAlign="right"></u-input>
					</u-form-item>
					<u-form-item label="可重复投票" prop="day_limit_status" leftIcon="reload"
						:leftIconStyle="{ color: color_value }" borderBottom="true">
						<view>
							<u-switch v-model="vote.day_limit_status" activeValue="1" inactiveValue="0"
								:activeColor="color_value"></u-switch>
						</view>
					</u-form-item>
					
					<u-form-item label="投票验证码" prop="verify_status" leftIcon="lock-fill"
						:leftIconStyle="{ color: color_value }" borderBottom="true">
						<view>
							<u-switch v-model="vote.verify_status" activeValue="1" inactiveValue="0"
								:activeColor="color_value"></u-switch>
						</view>
					</u-form-item>

					<u-form-item label="背景音乐" leftIcon="bell-fill" :leftIconStyle="{ color: color_value }"
						borderBottom="true" @click="goto('/pages/music/music')">
						<view>
							<u-input v-model="music_name" placeholder="选择背景音乐" disabled disabledColor="#ffffff"
								border="none" inputAlign="right" suffixIcon="arrow-right"></u-input>
						</view>
					</u-form-item>

					<u-form-item label="弹幕开关" prop="review_status" leftIcon="thumb-up-fill"
						:leftIconStyle="{ color: color_value }" borderBottom="true">
						<view>
							<u-switch v-model="vote.review_status" activeValue="1" inactiveValue="0"
								:activeColor="color_value"></u-switch>
						</view>
					</u-form-item>

					<u-gap height="10" bgColor="#f2f2f2"></u-gap>
					<u-form-item label="首页展示" prop="is_open" leftIcon="thumb-up-fill"
						:leftIconStyle="{ color: color_value }" borderBottom="true">
						<view>
							<u-switch v-model="vote.is_open" activeValue="1" inactiveValue="0"
								:activeColor="color_value">
							</u-switch>
						</view>
					</u-form-item>
					<u-form-item label="加粉设置" prop="fans_status" leftIcon="account-fill"
						:leftIconStyle="{ color: color_value }" borderBottom="true">
						<view>
							<u-switch v-model="vote.fans_status" activeValue="1" inactiveValue="0"
								:activeColor="color_value"></u-switch>
						</view>
					</u-form-item>
					<view style="padding: 0 20rpx;">
						<u-form-item label="类型" @click="fans_desc_type = true" borderBottom="true"
							v-if="vote.fans_status == '1'">
							<u-input v-model="type_text" disabled disabledColor="#ffffff" placeholder="请选择关注类型"
								border="none" inputAlign="right" @click="fans_desc_type = true"></u-input>
						</u-form-item>
						<u-action-sheet :show="fans_desc_type" :actions="fans_desc_type_actions" title="请选择关注类型"
							:closeOnClickOverlay="true" @close="fans_desc_type = false" @select="fans_desc_type_select">
						</u-action-sheet>
						<u-form-item label="名称" borderBottom="true" v-if="vote.fans_status == '1'">
							<u-input v-model="vote.fans_desc.name" placeholder="请输入名称" border="none" inputAlign="right">
							</u-input>
						</u-form-item>
						<u-form-item label="头像" borderBottom="true" v-if="vote.fans_status == '1'">
							<u-upload @afterRead="upload" name="avatar" :maxCount="1">
								<image
									:src="vote.fans_desc.avatar ? (imgUrl + vote.fans_desc.avatar) : '/static/img/upload.png'"
									style="width:80px;height:80px;"></image>
							</u-upload>
						</u-form-item>
						<u-form-item label="二维码" borderBottom="true" v-if="vote.fans_status == '1'">
							<u-upload @afterRead="upload" name="qr" :maxCount="1">
								<image
									:src="vote.fans_desc.qr ? (imgUrl + vote.fans_desc.qr) : '/static/img/upload.png'"
									style="width:80px;height:80px;"></image>
							</u-upload>
						</u-form-item>
						<u-form-item label="小程序appid" borderBottom="true"
							v-if="vote.fans_status == '1' && vote.fans_desc.type == '4'">
							<u-input v-model="vote.fans_desc.appid" placeholder="请输入小程序appid" border="none"
								inputAlign="right"></u-input>
						</u-form-item>
						<u-form-item label="小程序路径" borderBottom="true"
							v-if="vote.fans_status == '1' && vote.fans_desc.type == '4'">
							<u-input v-model="vote.fans_desc.path" placeholder="请输入小程序路径" border="none"
								inputAlign="right"></u-input>
						</u-form-item>
					</view>

					<button @click="submit()" class="submit" :style="'background-color:'+color_value">
						提交
						<!-- #ifdef H5 -->
						<wx-open-subscribe v-if="subscription"
							:template="subscription.wechat_huodongfabu+','+subscription.wechat_huodongshenhe"
							id="subscribe-btn" ref="subscribeBtn"
							style="width: 100%; z-index: 2; height: 100%;position:absolute;top:0;left:0;bottom:0;">
							<script type="text/wxtag-template">
								<style>
										.btn2 {
											width:100%;
											height:40px;
											border: none;
											opacity: 0;
										}
									</style>
									<button class="btn2"></button>
								</script>
						</wx-open-subscribe>
						<!-- #endif -->
					</button>

				</view>
			</u-form>
		</view>

		<datetime :show="datetime" @showDatetime="showDatetime"></datetime>
	</view>
</template>

<script>
	import datetime from 'components/datetime/datetime.vue';
	import {
		mapGetters
	} from 'vuex';
	export default {
		computed: {
			...mapGetters({
				imgUrl: 'common/cdnurl',
				system: 'common/system',
				color: 'common/color',
				color_value: 'common/color_value',
				active: 'common/active',
				subscription: 'common/subscription',
			})
		},
		components: {
			datetime
		},
		data() {
			return {
				tab: 1,
				datetime: false,
				datetime_field: '',
				fans_desc_type: false,
				fans_desc_type_actions: [{
						value: 1,
						name: '公众号'
					},
					{
						value: 2,
						name: '微信号'
					},
					{
						value: 3,
						name: '微信群'
					},
					{
						value: 4,
						name: '小程序'
					}
				],
				type_text: '',
				music_name: '',
				option: null,
				vote: {
					mold: 4,
					temp_name: '',
					image: '',
					name: '',
					start_time: uni.$u.timeFormat(Number(new Date()), 'yyyy-mm-dd hh:MM'),
					end_time: uni.$u.timeFormat(Number(new Date()) + 86400000 * 7, 'yyyy-mm-dd hh:MM'),
					desc: '尊重投票规则，请不要违规哦~',

					limit_count: 0,
					day_limit_count: 1,
					day_limit_status: '1',
					verify_status: '0',
					apply_status: '0',
					apply_check: '0',
					end_apply_status: '1',
					apply_start_time: uni.$u.timeFormat(Number(new Date()), 'yyyy-mm-dd hh:MM'),
					apply_end_time: uni.$u.timeFormat(Number(new Date()) + 86400000 * 3, 'yyyy-mm-dd hh:MM'),
					gift_status: '1',
					is_open: '1',
					fans_status: '0',
					fans_desc: {
						type: '',
						name: '',
						avatar: '',
						qr: '',
						appid: '',
						path: ''
					},
					option: [],

					sponsor_name: '',
					sponsor_mobile: '',
					music_id: 0,
					review_status: '1',
					group_status: '0',
					blue: '',
					red: '',
				},
			};
		},
		onLoad(options) {
			this.utils.hideShare()
			if (options.vote_id) {
				this.http(
					'vote/detail', {
						vote_id: options.vote_id
					},
					'get'
				).then(res => {
					this.vote = res.data;
					this.vote.start_time = this.vote.start_time_text;
					this.vote.end_time = this.vote.end_time_text;
					if (this.vote.music) {
						this.music_name = this.vote.music.name
					}

					if (!this.vote.fans_desc) {
						this.vote.fans_desc = {
							type: '',
							name: '',
							avatar: '',
							qr: '',
							appid: '',
							path: ''
						};
					} else {
						if (this.vote.fans_desc.type == 1) {
							this.type_text = '公众号';
						} else if (this.vote.fans_desc.type == 2) {
							this.type_text = '微信群';
						} else if (this.vote.fans_desc.type == 3) {
							this.type_text = '微信号';
						} else if (this.vote.fans_desc.type == 4) {
							this.type_text = '小程序';
						}
					}

				});
			}
		},
		onShow: function(e) {
			uni.$on('updateData', (e) => {
				if (e.music_id) {
					this.vote.music_id = e.music_id;
					this.music_name = e.music_name;
				}
			})
		},
		onReady() {
			// #ifdef H5
			this.$jweixin.ready(() => {
				this.$nextTick(() => {
					var btn = this.$refs.subscribeBtn;
					btn.addEventListener('success', ({
						detail
					}) => {
						console.log('success1', detail);
						this.submit()
					});
					btn.addEventListener('error', ({
						detail
					}) => {
						console.log('fail1', detail);
					});
				})
			})
			// #endif
		},
		watch: {
			/**
			 * 监听user
			 * @param value
			 */
			tab(value) {
				if (value != 1) {
					if (!this.vote.red) {
						uni.$u.toast('请输入红方名称')
						this.tab = 1;
					}
					if (!this.vote.blue) {
						uni.$u.toast('请输入蓝方名称')
						this.tab = 1;
					}
					if (!this.vote.name) {
						uni.$u.toast('请输入活动名称')
						this.tab = 1;
					}
				}
				if (value != 2) {
					if (this.vote.limit_count != 0 && this.vote.limit_count == '') {
						uni.$u.toast('请输入投票总次数')
						this.tab = 2;
					}
					if (this.vote.day_limit_count == '') {
						uni.$u.toast('请输入每天投票次数')
						this.tab = 2;
					}
				}

			},
		},
		methods: {

			submit() {

				//#ifdef MP-WEIXIN
				let tmplIds = []
				if (this.subscription && this.subscription != null && this.subscription != 'null') {
					tmplIds = [this.subscription.huodongfabu, this.subscription.huodongshenhe]
				}
				uni.requestSubscribeMessage({
					tmplIds: tmplIds,
					complete: res => {
						this.vote.send = false;
						if (tmplIds[0] && res[tmplIds[0]] == 'accept'){
							this.vote.send = true;
						}
						// #endif
						this.http(
							'vote/save',
							this.vote,
							'post'
						).then(res => {
							uni.reLaunch({
								url: '/pages/manage/manage?id=' + res.data.vote_id
							});
						});
						//#ifdef MP-WEIXIN
					}
				});
				// #endif

			},
			async upload(e) {
				await this.utils.uploadFile(this, e.file.url).then(res => {
					if (e.name == 'avatar') {
						this.vote.fans_desc.avatar = res.data.url
					} else if (e.name == 'qr') {
						this.vote.fans_desc.qr = res.data.url
					} else {
						this.vote[e.name] = res.data.url;
					}
				});
			},
			//选择日期时间组件
			showDatetime(time) {
				this.datetime = false;
				if (time) {
					this.vote[this.datetime_field] = time;
				}
			},
			//选择关注类型
			fans_desc_type_select(e) {
				this.vote.fans_desc.type = e.value;
				this.type_text = e.name;
				this.fans_desc_type = false;
			},
			//选择背景音乐
			goto(url) {
				this.utils.goto(url);
			}
		}
	};
</script>

<style lang="scss">
	page {
		background-color: #ffffff;
	}

	.back-step {
		display: flex;
		flex-direction: row;
		width: 100%;
		height: 164rpx;
		align-items: center;
		justify-content: center;
	}

	.back-cell {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.text-titleA {
		font-size: 24rpx;
		margin-top: 14rpx;
	}

	.text-titleB {
		font-size: 24rpx;
		color: rgba(0, 0, 0, 0.3);
		margin-top: 14rpx;
	}

	.active {
		font-size: 18px;
	}

	.lineC {
		height: 4rpx;
		width: 80px;
		margin-top: -30rpx;
		margin-left: 10px;
		margin-right: 10px;
	}

	.lineD {
		height: 4rpx;
		border-bottom: 1px dashed rgba(0, 0, 0, 0.2);
		width: 80px;
		margin-top: -30rpx;
		margin-left: 10px;
		margin-right: 10px;
	}

	.form {
		padding: 0 30rpx 30rpx;

		.upload_btn {
			background-color: rgba(0, 0, 0, 0.7);
			position: absolute;
			top: 290px;
			left: 300px;
			z-index: 999;
			padding: 5px;
			border-radius: 5px;
		}

		.form.u-form-item {
			min-height: 80px;

			&__body__right__content__slot {
				justify-content: flex-end;
			}
		}

		.u-switch {
			float: right;
		}

		.u-upload__wrap {
			justify-content: flex-end;
		}

		.scroll-list {
			@include flex(column);
			width: calc(100vw - 40px);

			&__line {
				@include flex;
				margin-top: 15px;

				&__item {
					min-width: 100px;
				}
			}
		}
	}

	.u-form-item__body__left {
		width: 150px !important;

		.u-icon__icon {
			font-size: 50px;
		}
	}

	.submit {
		width: 95%;
		height: 40px;
		line-height: 40px;
		color: #fff;
		border-radius: 100px;
		margin: 0 auto;
		margin-top: 20px;
		font-size: 14px;
		position: relative;
	}
</style>
